import { Tabs, Row, Col, Space, Button, Input, Card, message } from 'antd';
import { useEffect, useState } from 'react';

import commonService from '@/api/services/commonService';
import { ChargeModal } from '@/components/ChargeModal';
import CommonUpload from '@/components/CommonUpload/index';
import { WithdrawModal } from '@/components/WithdrawModal';

export default function WalletPage() {
  const [info, setInfo] = useState<any>({});
  const [show, setShow] = useState(false);
  const [params, setParams] = useState({ amount: 0, pic: '', mobile: '' });
  const [showPay, setShowPay] = useState(false);
  const [memberRechargeId, setMemberRechargeId] = useState('');
  const [showDraw, setShowDraw] = useState(false);

  // const [query, setQuery] = useState<any>({});
  useEffect(() => {
    commonService.getCustomApi('/member/myWallet', {}).then((res) => {
      setInfo(res || {});
    });
  }, []);

  // console.log(setQuery())

  const toPay = () => {
    const { amount } = params;
    if (!amount) {
      message.error('请选择或输入充值金额！');
      return false;
    }
    commonService
      .postCustomApi('/member/recharge/submitRecharge', { amount: (amount * 100).toFixed(0) })
      .then((res) => {
        setMemberRechargeId(res.id);
        setShowPay(true);
      });
  };

  const handleOk = () => {
    setShowPay(false);
  };

  const onBannkSubmit = () => {
    if (!params.pic) {
      message.error('请上传汇款回执凭证！');
      return false;
    }
    if (!params.amount) {
      message.error('请输入充值金额！');
      return false;
    }
    if (!params.mobile) {
      message.error('请输入联系方式！');
      return false;
    }
    commonService.postCustomApi('/member/member-offline-recharge/add', params).then(() => {
      message.success('提交成功！');
    });
  };

  const goRecharge = () => {
    message.info('请在下方选择相应的支付方式去充值！');
  };

  return (
    <Space direction="vertical" size="large" className="w-full">
      <Card title="我的钱包" bordered={false}>
        <div
          className="flex h-[100px] items-center text-[20px] text-[#686B73]"
          style={{ lineHeight: '100px', borderBottom: '1px solid #E8E9EC' }}
        >
          <div className="w-[300px]">
            余额：<span className="text-[#FD7901]">{(info.balance / 100).toFixed(2)}</span>
          </div>
          <Button className="h-[50px] w-[120px]" type="primary" ghost onClick={goRecharge}>
            去充值
          </Button>
        </div>
        <div
          className="flex h-[100px] items-center text-[20px] text-[#686B73]"
          style={{ lineHeight: '100px', borderBottom: '1px solid #E8E9EC' }}
        >
          <div className="w-[300px]">
            收益：<span className="text-[#FD7901]">{(info.earnings / 100).toFixed(2)}</span>
          </div>
          <Button
            className="h-[50px] w-[120px]"
            type="primary"
            ghost
            onClick={() => setShowDraw(true)}
          >
            去提现
          </Button>
        </div>
        <div className="mb-[20px] mt-[40px] text-[24px] text-[#363A44]">选择支付方式</div>
        <Tabs type="card">
          <Tabs.TabPane tab="线上充值" key="1">
            <div className="mt-[24px] flex flex-col gap-[20px]">
              <div className="flex items-center">
                <div>充值金额：</div>
                <div className="flex items-center gap-[20px]">
                  <Button
                    className="w-[160px]"
                    type="primary"
                    onClick={() => setParams({ ...params, amount: 100 })}
                    ghost={params.amount !== 100}
                  >
                    100元
                  </Button>
                  <Button
                    type="primary"
                    className="w-[160px]"
                    onClick={() => setParams({ ...params, amount: 3000 })}
                    ghost={params.amount !== 3000}
                  >
                    3000元
                  </Button>
                  <Button
                    type="primary"
                    className="w-[160px]"
                    onClick={() => setParams({ ...params, amount: 10000 })}
                    ghost={params.amount !== 10000}
                  >
                    10000元
                  </Button>
                  <div className="w-[160px]">
                    <Input
                      className="w-[160px]"
                      onBlur={(e: any) => setParams({ ...params, amount: e.target.value })}
                      placeholder="输入金额"
                      suffix="元"
                    />
                  </div>
                </div>
              </div>
              <div className="flex items-center">
                <div>应付金额：</div>
                <div className="text-[32px] text-[#FD7901]">{params.amount}元</div>
              </div>
              <div>
                <Button type="primary" onClick={toPay} className="h-[50px] w-[140px]">
                  立即支付
                </Button>
              </div>
            </div>
          </Tabs.TabPane>
          <Tabs.TabPane tab="银行转账（线下汇款）" key="2">
            <div className="flex flex-col gap-[20px]">
              <div>我司信息</div>
              <div
                className="border-1 w-[600px] leading-[50px]"
                style={{ border: '1px solid #B3B5B9', borderRadius: 8 }}
              >
                <Row className="px-[20px]">
                  <Col span="4">公司名称</Col>
                  <Col span="12">义乌优替供应链有限公司</Col>
                </Row>
                <Row className="bg-[#F2F3F7] px-[20px]" style={{ borderTop: '1px solid #B3B5B9' }}>
                  <Col span="4">银行名称</Col>
                  <Col span="12">中国建设银行股份有限公司</Col>
                </Row>
                <Row className="px-[20px]" style={{ borderTop: '1px solid #B3B5B9' }}>
                  <Col span="4">银行账号</Col>
                  <Col span="12">33050167625200001713</Col>
                </Row>
                <Row
                  className="bg-[#F2F3F7] px-[20px]"
                  style={{ borderTop: '1px solid #B3B5B9', borderRadius: '0 0 8px 8px' }}
                >
                  <Col span="4">开户银行</Col>
                  <Col span="12">义乌开发区支行</Col>
                </Row>
              </div>
              <div>汇款回执凭证(必填)：（请上传正常无翻转角度的截图，jpg、jpeg、png格式均可）</div>
              <div>
                <CommonUpload
                  isSingle
                  value={params.pic}
                  onChange={(e: any) => setParams({ ...params, pic: e })}
                />
              </div>
              <div className="flex items-center">
                请输入充值金额(必填)：
                <div className="mr-[20px] w-[160px]">
                  <Input
                    value={params.amount}
                    onChange={(e: any) => setParams({ ...params, amount: e.target.value })}
                    suffix="元"
                  />
                </div>
                联系方式(必填)：
                <div className="w-[200px]">
                  <Input
                    value={params.mobile}
                    onChange={(e: any) => setParams({ ...params, mobile: e.target.value })}
                  />
                </div>
                <span className="text-[#686B73]">（建议留下您的手机号，方便我们与您及时联系）</span>
              </div>
              <div>
                <Button type="primary" onClick={onBannkSubmit} className="h-[50px] w-[140px]">
                  提交
                </Button>
              </div>
            </div>
          </Tabs.TabPane>
        </Tabs>
      </Card>
      <WithdrawModal show={showDraw} onClose={() => setShowDraw(false)} />
      <ChargeModal
        show={showPay}
        onOk={handleOk}
        memberRechargeId={memberRechargeId}
        onClose={() => setShowPay(false)}
      />
    </Space>
  );
}
